<template>
  <view>
    <view class="top-view">
      <!-- 			<uni-nav-bar
				title="我的钱包"
				backgroundColor="transparent"
				:shadow="false"
				:border="false"
				:statusBar="true"
				leftIcon="back"
				@clickLeft="navBack"
				color="black">
			</uni-nav-bar> -->
    </view>
    <view class="container">
      <view class="top-card-view">
        <view class="top-card">
          <view class="balance-row">
            <view class="left">
              <view class="title">
                账户余额
                <view class="unit">{{ income }}(元)</view>
              </view>
              <!-- <view class="money">1469.00</view> -->
            </view>
            <view class="right-btn" @click="navToWithdrawDeposit">提现</view>
          </view>

          <view class="total-row">
            <view class="total-item">
              <view class="title">
                总收入
                <view class="unit">{{ income }}(元)</view>
              </view>
              <!-- <view class="money">1469.00</view> -->
            </view>

            <!-- <view class="total-item right-item">
							<view class="title">
								总提现
								<view class="unit">(元)</view>
							</view>
							<view class="money">1469.00</view>
						</view> -->
          </view>
        </view>
      </view>

      <view class="table-view">
        <view class="title">账单明细</view>
        <view class="date-row">
          <view class="left">
            <picker mode="date" fields="month" @change="onDateChange">
              {{ date.format("yyyy年MM月") }}
              <uni-icons type="bottom"></uni-icons>
            </picker>
          </view>
          <view class="right">
            <view class="item">收入：{{ income }}</view>
            <!-- 	<view class="item">提现：</view> -->
          </view>
        </view>
        <view class="item-row" v-for="(item, index) in info">
          <view class="left">
            <view class="name">订单到账</view>
            <view class="date">{{ item.createTime }}</view>
          </view>
          <view class="right sub-text">+{{ item.amount }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import * as nurseInfo from "../../common/api/nurseInfo.js";
export default {
  data() {
    return {
      date: null,
      uid: "",
      income: "",
      info: [],
    };
  },
  onLoad(opt) {
    if (opt.uid) {
      this.uid = opt.uid;
    }
    this.date = new Date();
  },
  onShow() {
    this.getData();
  },
  methods: {
    navBack() {
      uni.navigateBack();
    },
    navToWithdrawDeposit() {
      // uni.navigateTo({
      // 	url: '/pages/withdrawDeposit/withdrawDeposit'
      // })
      // 拼接income参数到URL，传递账户余额
      uni.navigateTo({
        url: `/pages/withdrawDeposit/withdrawDeposit?income=${encodeURIComponent(
          this.income
        )}`,
      });
    },
    getData() {
      const dataJson = uni.getStorageSync("user_info") || "{}";
      console.log("user_info dataJson", dataJson);
      const data = JSON.parse(dataJson) || {};
      const param = {
        uid: data.nurseUid,
      };
      nurseInfo
        .queryByOrder(param)
        .then((result) => {
          this.info = result.data.data.queryByOrderDOList;
          this.income = result.data.data.income;
          console.log("数据返回", this.info);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    onDateChange(e) {
      console.log(e);
      this.date = new Date(e.detail.value);
    },
  },
};
</script>

<style>
page {
  background: white;
}
</style>
<style lang="scss" scoped>
.top-view {
  height: 700rpx;
  background: linear-gradient(
    to bottom,
    rgba(207, 234, 238, 1),
    rgba(207, 234, 238, 0)
  );
}

.container {
  // margin-top: -560rpx;
  margin-top: -660rpx;
  display: flex;
  flex-direction: column;
}

.top-card-view {
  display: flex;
  align-items: center;
  justify-content: center;

  .top-card {
    width: 686rpx;
    height: 352rpx;
    background: url("../../static/wallet_pic.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    padding: 36rpx 40rpx;
    box-sizing: border-box;

    .balance-row {
      display: flex;
      align-items: flex-end;

      .left {
        flex: 1;
        color: white;

        .title {
          font-size: 30rpx;
          display: flex;
          align-items: center;
          font-size: 500;

          .unit {
            font-size: 22rpx;
            font-size: 400;
          }
        }

        .money {
          font-size: 64rpx;
          font-weight: bold;
          margin-top: 12rpx;
          line-height: 76rpx;
        }
      }

      .right-btn {
        width: 144rpx;
        height: 80rpx;
        background: white;
        border-radius: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #2eb0d9;
        font-size: 30rpx;
      }
    }

    .total-row {
      display: flex;
      flex: 1;
      align-items: flex-end;

      .total-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: white;

        .title {
          font-size: 30rpx;
          font-weight: 500;
          display: flex;
          align-items: center;

          .unit {
            font-size: 22rpx;
            font-weight: 400;
          }
        }

        .money {
          line-height: 52rpx;
          font-size: 44rpx;
          font-weight: 600;
        }
      }

      .right-item {
        align-items: center;
      }
    }
  }
}

.table-view {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: white;
  padding: 40rpx;
  box-sizing: border-box;
  margin-top: 44rpx;

  .title {
    color: #232323;
    font-size: 32rpx;
    font-weight: 600;
  }

  .date-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32rpx;

    .left {
      font-size: 36rpx;
      color: #232323;
      display: flex;
      align-items: center;
    }

    .right {
      display: flex;
      align-items: center;

      .item {
        margin-left: 24rpx;
        color: #232323;
        font-size: 24rpx;
      }
    }
  }

  .item-row {
    min-height: 146rpx;
    border-bottom: solid 2rpx #f8f8f8;
    display: flex;
    align-items: center;

    .left {
      flex: 1;

      .name {
        color: #232323;
        font-size: 32rpx;
        font-weight: 400;
      }

      .date {
        color: rgba(35, 35, 35, 0.5);
        font-size: 24rpx;
        font-weight: 400;
        margin-top: 10rpx;
      }
    }

    .right {
      font-size: 36rpx;
      font-weight: 500;
    }

    .add-text {
      color: #2eb0d9;
    }

    .sub-text {
      color: #232323;
    }
  }
}
</style>
